<template>
  <div>
    <el-form label-width="80px">

      <el-form-item label="承运商">
        <el-select v-model="carrierName" placeholder="请选择" @change="changeCarrier" clearable>
          <el-option
            v-for="carrier in carriers"
            :index="carrier.carrierNumber"
            :label="carrier.carrierName"
            :value="carrier.carrierName"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车牌号">
        <el-select v-model="carPlate" @change="changCarType" clearable>
          <el-option
            v-for="carManagement in carManagements"
            :label="carManagement.carPlate"
            :value="carManagement.carPlate"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="司机">
        <el-select v-model="driverName" placeholder="请选择司机" clearable>
          <el-option
            v-for="driver in drivers"
            :label="driver.driverName"
            :value="driver.driverName"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveCarInfo">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        carriers: [],
        carPlate: '',
        carrierNumber: '',
        carrierName: '',
        carNumber: '',
        carManagements: [],
        drivers: [],
        driverName: [],
      }
    },
    methods: {
      saveCarInfo(carrierName, carPlate, driverName) {
        console.log(this.carrierName, this.carPlate, this.driverName);
      },
      //车牌号码下拉框发生改变时触发
      changCarType(carPlate) {
        //重新选择承运商时，清空缓存的车辆车牌和司机
        this.driverName = '';
        console.log(carPlate);

        for (let carManagement of this.carManagements) {
          if (this.carPlate == carManagement.carPlate) {
            this.carNumber = carManagement.carNumber;
          }
          console.log('选择车牌号码对应的车辆编号为：', this.carNumber);
        }

        this.$http({
          method: "get",
          url: "http://localhost/carDriver/search",
          params: {
            carNumber: this.carNumber
          }
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log(resp.data.data);
            this.drivers = resp.data.data;
          }
        })

      },
      //承运商下拉框发生改变时触发
      changeCarrier(val) {
        //重新选择承运商时，清空缓存的车辆车牌和司机
        this.carPlate = '',
          this.driverName = '',
          console.log('承运商名称 = ', val);//val = 承运商名称

        if (val != '') {
          for (let carrier of this.carriers) {
            if (carrier.carrierName == val) {
              this.val = carrier.carrierNumber;
            }
            console.log('下拉框选中的承运商编号为：', this.val);
          }

          this.$http({
            method: "get",
            url: "http://localhost/carManagement/search",
            params: {
              carrierName: val
            }
          }).then(resp => {
            if (resp.data.code == 100000) {
              console.log(resp.data.data);
              this.carManagements = resp.data.data;
            }
            this.val = '';
          })
        }
      },
      //查询所有承运商
      findCarrier() {
        this.$http({
          method: "get",
          url: "http://localhost/carCarrier/list"
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log(resp.data.data);
            this.carriers = resp.data.data;
          }
        })
      },
    },
    //方法在初始化时调用
    created() {
      //查询车辆信息表
      this.findCarrier();
    },

  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

</style>
